<template>
  <div class="power-list" v-show="powerListShow">
    <div class="power-list-header"></div>
    <div class="power-list-content" ref="powerListItem">
      <div>
        <ul class="power-list-content-item" ref="powerListItem">
          <li class="power-list-content-list" v-for="item of helpers" :key="item.id">
            <div class="avatar">
              <img class="avatar-image" :src="item.helper.avatar">
            </div>
            <span class="name">{{item.helper.name}}</span>
            <span class="prompt">
              助力抽到<strong class="focus">“{{item.word.name}}”</strong>字
            </span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  name: 'PowerList',
  props: ['helper'],
  data () {
    return {
      helpers: [],
      powerListShow: false
    }
  },
  mounted () {
    this.assignment()
    this.scroll = new BScroll(this.$refs.powerListItem)
  },
  watch: {
    helper () {
      this.helpers = this.helper
      if (this.helpers.length > 0) {
        this.powerListShow = true
      }
    }
  },
  methods: {
    assignment () {
      this.helpers = this.helper
      if (this.helpers.length > 0) {
        this.powerListShow = true
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/mixin'
  .power-list
    .power-list-header
      margin 0 auto
      width 463px
      height 73px
      background url("../assets/img/power-list.png") no-repeat
      background-size cover
    .power-list-content
      margin 36px auto 0
      width 623px
      height 350px
      background url("../assets/img/rectangle.png") no-repeat
      background-size cover
      overflow hidden
      .power-list-content-item
        display flex
        flex-direction column
        justify-content space-between
        height 100%
        .power-list-content-list 
          display flex
          margin-top 30px
          padding-left 28px
          color #2f1302
          .avatar
            width 80px
            height 80px
            .avatar-image
              width 100%
              height auto
              border-radius 50%
          .name
            height 80px
            line-height 80px
            margin-left 5px
            font-size 30px
            flex 1
            ellipsis()
          .prompt
            height 80px
            line-height 80px
            font-size 30px
            // flex 1
            padding-right 28px
            .focus
              color rgb(243,98,141)
              font-size 32px
              font-weight 600
</style>
